二、loading动画

2023-06-02 19:31| 来源: 网络整理| 查看: 265

局部loading和全局loading动画都有各自的优缺点，下面分别进行介绍（都以elementUI动画为例）：

一、局部loading动画：

局部loading.gif

优点：

用户体验好：局部loading动画只在需要加载的区域显示，可以减少用户等待时间和焦虑感，提升用户体验。

页面性能高：局部loading动画只在需要加载的区域显示，可以减少不必要的资源浪费和页面加载时间，提升页面性能。

缺点：

实现难度高：实现局部loading动画需要对页面进行细致的划分和处理，增加了开发难度和工作量。

代码复杂度高：局部loading动画需要对页面进行多层嵌套和状态管理，增加了代码复杂度和维护难度。

实现方法：局部的要借用vuex来管理loading状态

vuex文件:

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: { //默认状态为false loadingDisplay: false, }, mutations: { //官网说--更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 loadingShow(state, val) { state.loadingDisplay = val; }, }, actions: {}, modules: {}, }); export default store; //还一种更改vuex中的状态方法写在了action里，好像是异步的，不知道有什么区别，就没有写在action里

封装的axios：

/**** request.js ****/ // 导入axios import axios from 'axios' //创建axios实例 const service = axios.create({ // 公共接口--接口地址重复的那一部分，比如地址和端口 baseURL: "/api", // 超时时间单位是ms，这里设置了10s的超时时间 timeout: 60 * 1000 }) //请求拦截器 service.interceptors.request.use(config => { this.$store.commit("loadingShow",true)//修改vuex里loadingShow状态为true config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 config.headers = { 'Content-Type': 'application/json' //配置请求头application/json } return config }, error => { Promise.reject(error) }) //响应拦截器---接收到响应数据并成功后的一些共有的处理，关闭loading等 service.interceptors.response.use(response => { this.$store.commit("loadingShow",false)//修改vuex里loadingShow状态为false return response })

在需要loading动画的vue页面里：

export default { components: {}, props: {}, data() { return { }; }, watch: {}, computed: { //监听vuex中的loadingDisplay isLoading(){ return this.$store.state.loadingDisplay } }, methods: {}, created() {}, mounted() {} }; 二、全局loading动画：

全局loading.gif

优点：

实现简单：全局loading动画只需要在页面上覆盖一层遮罩，并在中心显示loading动画，实现简单。

状态管理简单：全局loading动画只需要对loading状态进行管理，代码逻辑简单。

缺点：

用户体验差：全局loading动画会覆盖整个页面，可能导致用户焦虑和等待时间增长，用户体验不好。

页面性能差：全局loading动画会影响整个页面的性能，尤其是在页面复杂或数据量大的情况下，可能会导致页面卡顿或崩溃。

实现方法：

全局的比较容易，大概原理就是在请求数据时在页面添加一层loading动画。直接使用emenentUI的loading组件。

axios有两个拦截器，分别是请求响应拦截器（request）和响应数据拦截器（response），所以我们要在请求拦截器里添加loading动画，在响应拦截器里结束loading动画

1.在封装axios文件里创建一个loading开始函数和结束函数 /**** request.js ****/ // 导入axios import axios from 'axios' // 使用element-ui loading组件 import { Loading } from 'element-ui'; let loading //loading动画开始方法 function startLoading() { //使用Element loading-start 方法 loading = Loading.service({ lock: true, text: "数据正在加载中...", background: "rgba(255,255,255,0)", }); } //loading函数结束方法 function endLoading() { //使用Element loading-close 方法 loading.close(); } //创建axios实例 const service = axios.create({ // 公共接口--接口地址重复的那一部分，比如地址和端口 baseURL: "/api", // 超时时间单位是ms，这里设置了10s的超时时间 timeout: 60 * 1000 }) //请求拦截器 service.interceptors.request.use(config => { startLoading();//开始loading动画 config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 config.headers = { 'Content-Type': 'application/json' //配置请求头application/json } return config }, error => { Promise.reject(error) }) //响应拦截器---接收到响应数据并成功后的一些共有的处理，关闭loading等 service.interceptors.response.use(response => { endLoading(); //关闭loading动画 return response })

综上所述，局部loading和全局loading动画都有各自的优缺点，选择哪种方式需要根据具体的业务需求和用户体验来进行选择。

我自我感觉局部loading好，但是能点击其他地方，会不会有什么其他bug就不知道了，而且比较麻烦，所以暂时就不改成局部的了。

【本文地址】

公司简介

联系我们